<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>许愿墙</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript" language="javascript" src="jquery-ui.js"></script>
<script language="javascript">
	$(function(){
        $("#start").click(function(){
            $("#wish").css({"z-index":++level}).show();
        })
        $("#close").click(function(){
            $("#wish").hide();
        })

	})
    $(function(){
           $("#form1").submit(function(){
                 $.ajax({
                     url:"action.php?a=add",
                     type:"post",
                     data:$("#form1").serialize(),
                     success:function(data){
                        if(data==1){

                        load();
                        $("#wish").hide(2000);
                         }
                        else{
                            alert("许愿失败,请重试");
                            }
                       }

                 })
                 return false;
           })

    })
    var level=0;
    function load(){
        $.ajax({
               url:"action.php?a=show",
               dataType:"json",
               success:function(data){
                if(data==0){
                    return;
                }
                $("#show_wish").empty();
                $(data).each(function(i){
                    var color=["url(images/style0.gif) no-repeat","url(images/style1.gif) no-repeat","url(images/style2.gif) no-repeat","url(images/style3.gif) no-repeat","url(images/style4.gif) no-repeat"];
                    index = Math.floor(Math.random()*color.length);
                    var img=["001.gif","002.gif","003.gif","004.gif","005.gif","006.gif","007.gif","008.gif","009.gif","010.gif","011.gif"]
                    index1= Math.floor(Math.random()*img.length);
                    level++;
                    x=Math.floor(Math.random()*760)+"px";
                    y=Math.floor(Math.random()*314)+"px"
                    function getLocalTime(nS) {
                        return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
                        }
                    var  style= "style='position:absolute;background:"+color[index]+";top:"+y+";left:"+x+";'";
                    var  div='';
                    div+= "<div class='divshow' "+style+"><h2>"+this.title+"<span>"+this.wid+"</span>"+"</h2>";
                            div+= "<div class='divshowin'><img src='images/"+img[index1]+"'><p>"+this.content+"</p></div><div class='showtime'><span>"+this.self+"</span><p>"+getLocalTime(this.addtime)+"</p></div>";
                            div+="</div>";
                            $("#show_wish").append(div);
                })
                
               }
          
        })
        return false;
    }
    $(function(){load()});
    $(function(){
            $(".divshow").live("click",function(){
                $(this).css({"z-index":++level});
                $(this).draggable({ containment: "#show_wish", scroll: false });
            })
            
        })
</script>
</head>

<body>
<div class="top">
    <div class="head">
        <img src="images/logo.png"/>
    </div>
</div>
<div class="sub">
    <div class="nav">
        <div id="start">我要许愿</div>
    </div>
</div>

	<div id="wish">
	<form action="" method="post" id="form1">
        <div><div id="close"></div></div>
        <table border=1 width=350 height=200>
           
            <tr>
		            <td>标题:</td>
                    <td><input type="text" name="title" size="20"></td>
           </tr>
           <tr>
                <td cols=2>写祝福吧</td>
                </td>
           </tr>
           <tr>
            <td></td>
            <td>
        		<textarea cols=20 rows=4 name="content">
        		</textarea>
            </td>
          </tr>
          <tr>
            <td>签名</td>
            <td>
		  <input type="text" name="self">
           </td>
          </tr>
         <tr>
        <td colspan=2 align="center">
		  <input type="submit" value="许愿" id="submit">
           </td>
        </tr>
        </table>
	</form>
    </div>
<div class="main">
    <div class="side"></div>
    <div id="show_wish"></div>
</div>  
<div class="bottom"></div>
<div class="copyright"></div>   
</body>
</html>
